<template>
  <div class="column" v-cloak>
    <div class="header-text">
      <span>您当前的位置：</span>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/SEO/SEOhome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '#' }">SEO设置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '#' }">TAG管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="contanter">
      <div class="table-title">
        <span>TAG管理</span>
      </div>
      <div class="heaer-button">
        <el-button type="primary" size="small" @click="addOne">添加</el-button>
        <el-button type="primary" size="small">批量添加</el-button>
        <el-button type="primary" size="small">删除</el-button>
        <el-button type="primary" size="small">一键生成内容TAG</el-button>
        <el-button type="primary" size="small">TAG同步主站URL</el-button>
      </div>
      <!-- 表格视图 -->
      <div class="container-table">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column prop="id" label="ID" width="50" align="center"></el-table-column>
          <el-table-column prop="colName" label="TAG名称" align="left"></el-table-column>
          <el-table-column prop="name" label="别名" width="150" align="left"></el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <div class="make-date">
                <el-button type="primary" size="mini" @click="compile(scope.row)">编辑</el-button>
                <el-button type="primary" size="mini" @click="delOneRow(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      handleSelectionChange: [], //表格选择的数据
      tableData: [], //图表数组
    };
  },
  created() {
    this.$http({
      path: "/date/SEO/SEOdate.json",
      method: "get",
    })
      .then((rel) => {
        this.tableData = rel;
        console.log(this.$store.state.Column.column);
        console.log(rel);
      })
      .catch((err) => {});
  },
  methods: {
    // 新增一行数据
    goContent(row){
this.$store.commit('addColumnOne',row)
    },
    addOne() {
      this.$router.push({
        path: "/SEO/TAG/add",
      });
    },
    content(row) {
      if (row.nav === "不显示") {
        return true;
      }
      return false;
    },
    // 删除一个数据
    delOneRow(row) {
      console.log(row);
    },
  },
  computed: {},
};
</script>

<style socped>
.el-table th {
  text-align: center;
}
[v-cloak] {
  display: none;
}
.make-date {
  justify-content: center;
  display: flex;
  width: 100%;
}

.make-date .el-button {
  height: 32px;
  padding: 0 10px;
  margin: 0;
  margin-left: 5px;
}
.make-date .el-button:first-child {
  margin: 0;
}
.make-date .el-button span {
  padding: 0;
}
.container-table {
  margin: 13px 0;
}
.heaer-button .el-button:hover {
  background-color: #0099cc;
}
.heaer-button .el-button {
  background-color: #28b5d6;
  border-radius: 0;
}
.table-title span {
  display: block;
  line-height: 15px;
  padding-left: 15px;
  margin-left: 2px;
  border-left: 2px solid #88b7e0;
}
.table-title {
  display: flex;
  align-items: center;
  height: 45px;
  margin-bottom: 20px;
  border-bottom: 1px solid #dddddd;
  line-height: 45px;
}
.contanter {
  padding: 15px 27px;
  margin: 30px;
  background-color: #fff;
}
.header-text {
  display: flex;
  height: 30px;
  line-height: 30px;
  padding-left: 25px;
  background-color: #fff;
  text-align: left;
}
.el-breadcrumb {
  line-height: 30px;
  height: 30px;
}
.column {
  background-color: #eaedf1;
  font-size: 14px;
  height: 100%;
}
</style>